<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      repaymentLog:{
        pageNum: 1,
        pageSize: 3
      },
<<<<<<< HEAD
      ShouData:[],
      ZhiData:[],
      xData: ["一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份", "十月份", "十一月份", "十二月份"], //横坐标
      yData: [], //收入数数据
      taskDate: [], //支出数据
=======
      xData: ["一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份", "十月份", "十一月份", "十二月份"], //横坐标
      yData: [], //人数数据
      taskDate: [2.5,0,0,0,0,0,0,0,0,0,0,0],
>>>>>>> b9a901b1fcebacba5607c234b0fee720966ba010
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    };
  },
  mounted() {
    this.list()
  },
  methods: {
    //去还款日志中查询还款金额
    list(){
<<<<<<< HEAD
      // 查询收入记录信息
      this.$http.get("/backstage/finance/getAll?parentId=2").then( res=>{
        console.log(res.data)
        this.ShouData=res.data.data
        if(res.data.statusCode==2000){
          this.ShouData.forEach(response=>{
            ////收入数数据
            this.yData.push(response.finname)
          })
          //调用接口
          this.initEcharts();

        }
      })

      // 查询收入记录信息
      this.$http.get("/backstage/finance/getAll?parentId=15").then( res=>{
        console.log(res.data)
        this.ZhiData=res.data.data
        if(res.data.statusCode==2000){
          this.ZhiData.forEach(response=>{
            //支出数据
            this.taskDate.push(response.finname)
          })
          //调用接口
          this.initEcharts();

=======
     // 查询还款记录信息
      this.$http.get("/repaymentLog/getAll").then( res=>{
        console.log(res.data)
        this.RepaymentLog=res.data.data
        if(res.data.statusCode==2000){
          this.RepaymentLog.forEach(response=>{
            this.yData.push(response.money)
            this.initEcharts();
          })
>>>>>>> b9a901b1fcebacba5607c234b0fee720966ba010
        }
      })

    },
    initEcharts() {
      // 多列柱状图
      const mulColumnZZTData = {
        xAxis: {
          data: this.xData,
        },
        // 图例
        legend: {
<<<<<<< HEAD
          data: ["收入", "支出"],
=======
          data: ["支出", "收入"],
>>>>>>> b9a901b1fcebacba5607c234b0fee720966ba010
          top: "0%"
        },
        yAxis: {

        },
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData,
<<<<<<< HEAD
            name: "收入", // legend属性
=======
            name: "支出", // legend属性
>>>>>>> b9a901b1fcebacba5607c234b0fee720966ba010
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top"
            }
          },
          {
            type: "bar", //形状为柱状图
            data: this.taskDate,
<<<<<<< HEAD
            name: "支出", // legend属性
=======
            name: "收入", // legend属性
>>>>>>> b9a901b1fcebacba5607c234b0fee720966ba010
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top"
            }
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>


<<<<<<< HEAD

=======
>>>>>>> b9a901b1fcebacba5607c234b0fee720966ba010
